<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240); margin-bottom: 10px"
    title="yunexam在线考试系统"
    sub-title="考试登录"
  >
    <a-descriptions title="请确认考试信息">
      <a-descriptions-item label="开始时间">{{ examInfo.startTime }}</a-descriptions-item>
      <a-descriptions-item label="考试时长">{{ examInfo.duration }} 秒</a-descriptions-item>
    </a-descriptions>
  </a-page-header>
  <a-form ref="formRef" :model="loginFormState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="学号" name="stuNumber">
      <a-input v-model:value="loginFormState.stuNumber" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input v-model:value="loginFormState.password" type="password" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit" :disabled="!isVaildExam">登录</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { message } from "ant-design-vue";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getExam, userLogin } from "../../utils/api";
import moment from "moment";

export default defineComponent({
  setup() {
    const formRef = ref();
    const router = useRouter();
    const route = useRoute();
    const examId = route.params["examId"];
    const isVaildExam = ref(false);
    const loginFormState = reactive({
      stuNumber: "",
      password: "",
    });
    const examInfo = ref({
      startTime: "",
      duration: "",
    });
    const rules = {
      stuNumber: [{ required: true, message: "请输入学号", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    };
    const fetchExamInfo = async () => {
      let result = await getExam(examId);
      if (result.data.code != 200) {
        message.error(result.data.message);
        return;
      }
      examInfo.value = result.data.data;
      isVaildExam.value = true;
    };

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(loginExam)
        .catch((error) => {
          console.log("error", error);
        });
    };
    const loginExam = async () => {
      await fetchExamInfo();
      let loginResult = await userLogin(loginFormState);
      if (loginResult.data.code != 200) {
        message.error(loginResult.data.message);
        return;
      }
      message.info(loginResult.data.message);
      let startTime = moment(examInfo.value.startTime, "YYYY-MM-DD HH:mm:ss");
      if (startTime.valueOf() > new Date().getTime()) {
        message.error("考试未开始,请等待");
        return;
      }
      router.push({ name: "ExamList", params: { examId } });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };

    onMounted(() => {
      fetchExamInfo();
    });

    return {
      formRef,
      rules,
      loginFormState,
      examInfo,
      examId,
      isVaildExam,
      onSubmit,
      resetForm,
      fetchExamInfo,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    };
  },
});
</script>
